import * as React from 'react'
import { Table, Button, Form, Input, Pagination, Modal } from 'antd'
import axios from '@/utils/axios'
import api from '@/api'
import './styles.less'

import DictDetail from './detail'


@Form.create()
class ConfigDict extends React.Component<Props> {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
      modalDetail: false,
      searchParam: '',
      tableData: [],
      curPage: 1,
      total: 0,
      detailCode: '',
      detailName: '',
    }
    this.tableColumns = [
      { key: 'no', title: '序号', render: (data, context, index) => {
        return (this.state.curPage - 1)*10 + index + 1
      }},
      { dataIndex: 'dict_code', title: '字典编码'},
      { dataIndex: 'dict_name', title: '字典名称'},
      { key: 'operate',
        title: '操作',
        render: (text, record, index) => {
          return (
            <span>
              <Button type="primary"
                onClick={()=> this.handleDetail(record)}
              >维护</Button>
            </span>
          )
        }
      }
    ]
  }
  fetchData() {
    this.setState({
      loading: true
    })
    const reqParams = {
      search_param: this.state.searchParam,
      cur_page: this.state.curPage
    }
    axios.post(api.configDict.list, reqParams).then(res => {
      this.setState({
        tableData: res.data.list,
        loading: false,
        curPage: res.data.cur_page,
        total: res.data.total
      })
    })
  }
  handleDetail(record) {
    this.setState({
      detailCode: record.dict_code,
      detailName: record.dict_name,
      modalDetail: true,
    })    
  }

  handleChangePage(p) {
    this.setState({
      curPage: p
    })
    this.fetchData()
  }
  handleSearch(){

  }
  handleCreateDict() {

  }
  componentDidMount() {
    this.fetchData()
  }

  render(){
    return (
      <div className="config-dict">
        <div className="search">
          <Input.Search
            placeholder="搜索字典编码或名称"
            onSearch={value => this.handleSearch(value)}
            defaultValue={this.state.searchParam}
            enterButton="搜索"
            style={{width: '220px', marginRight: '5px'}}
          />
          <Button type="primary"
            onClick={()=> this.handleCreateDict()}
          >新增</Button>
        </div>
        <Table
          loading={this.state.loading}
          className="dict-table"
          columns={this.tableColumns}
          dataSource={this.state.tableData}
          rowKey="dict_code"
          pagination={false}
        ></Table>
        <Pagination
          style={{ textAlign: 'right' }}
          onChange={this.handleChangePage.bind(this)}
          total={this.state.total}
          showTotal={(total, range) =>
            `${range[0]}-${range[1]} of ${total} items`
          }
          current={this.state.curPage}
        />
        <Modal
          visible={this.state.modalDetail}
          width={1100}
          footer={null}
          title={'维护字典:' + this.state.detailName}
          maskClosable={false}
          onCancel={()=>this.setState({modalDetail: false})}
        >
          <DictDetail dictCode={this.state.detailCode}
          />
        </Modal>
      </div>
    )
  }
}
export default ConfigDict